<template>
    <div class="box">
        <div class="img-box">
            <img src="../../../assets/images/plan.png" alt="">
        </div>
        <div class="content-box">
            <div class="title-box">
                <b>赚钱任务</b>
                <i>随时随地，自由工作</i>
            </div>
            <div class="content">
                通过分享好友产品，好友购买后，即可获得现金奖励，可提现哦！
                随时随地，自由工作
            </div>
            <div class="title-box yellow">
                <b>成长体系</b>
                <i>赚多赚少，你说了算</i>
            </div>
            <div class="content">
                可以用碎片时间做任务月入数千，也可以扩展社群影响力收入上万
                赚多赚少，你说了算
            </div>
            <div class="title-box red">
                <b>宣传素材</b>
                <i>一键分享，轻松赚钱</i>
            </div>
            <div class="content">
                为你准备好了海报、图片和软文，点击分享就能开始赚钱
            </div>
        </div>
        <button class="open-btn" v-if="isCertification">立即邀请好友</button>
        <button class="open-btn" v-else @click="isShow = true">立即开启赚钱计划</button>
        <div class="interests-box">会员权益</div>
        <!--实名认证弹窗-->
        <van-popup v-model="isShow">
            <div class="pop-box">
                <van-icon name="clear" @click="isShow = false" />
                <h4>实名认证</h4>
                <form>
                    <div class="input-box">
                        <label for="">姓名</label>
                        <input type="text" placeholder="请输入您的真实姓名" v-model="userName">
                    </div>
                    <div class="input-box">
                        <label for="">手机号</label>
                        <input type="tel" placeholder="请输入您的手机号" v-model="phone">
                    </div>
                    <div class="input-box">
                        <label for="">验证码</label>
                        <input type="number" placeholder="请输入验证码" v-model="verification">
                        <button>获取验证码</button>
                    </div>
                    <div class="input-box">
                        <label for="">身份证号码</label>
                        <input type="text" placeholder="请输入您的身份证号码" v-model="IDNumber">
                    </div>
                    <button class="agree-btn">同意协议并进行认证</button>
                    <p>
                        <van-checkbox checked-color="#28DBC7" icon-size="10px" v-model="checked">
                            同意 <router-link to="">《用户认证协议》</router-link>及<router-link to="">《隐私政策》</router-link>条款
                        </van-checkbox>
                    </p>
                </form>
            </div>
        </van-popup>

    </div>
</template>

<script>
    export default {
        name: "plan",
        data(){
            return{
                isCertification:false,//是否认证
                isShow:false,//弹窗是否显示
                userName:'',
                phone:'',
                IDNumber:'',
                verification:'',//验证码
                checked:false,//是否同意协议
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/public";
    .box{
        position: relative;
        background-image: url("../../../assets/images/plan-bg.png");
        background-size: 100% auto;
        background-repeat: repeat;
        .content-box {
            position: absolute;
            left: vw(30);
            top: vw(527);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: vw(690);
            height: vw(669);
            padding: vw(60) vw(32);
            .title-box{
                width: vw(470);
                height: vw(44);
                /*background-image:linear-gradient( 180deg, rgba(242,104,12,.102) 0%, rgba(255,145,56.102) 100%);*/
                box-shadow: 0px 1px 1px 0px rgba(214, 80, 0, 0.004);
                background: #fff3ea;
                color: #ff9e55;
                font-size: vw(28);
                border-radius: vw(22);
                overflow: hidden;
                &.red{
                    background: #feefee;
                    color: #ff807c;
                    b{
                        background-image: linear-gradient( 0deg, rgb(255,78,59) 0%, rgb(241,98,101) 100%);
                    }
                }
                &.yellow{
                    background: #e8faee;
                    color: #4bd16d;
                    b{

                        background-image: linear-gradient( 0deg, rgb(20,179,31) 0%, rgb(36,223,142) 100%);
                    }
                }
                b {
                    display: inline-block;
                    width: vw(166);
                    height: vw(44);
                    margin-right: vw(10);
                    padding-left: vw(16);
                    background-image:linear-gradient( 0deg, rgb(242,104,12) 0%, rgb(255,145,56) 100%);
                    box-shadow: 0px 1px 1px 0px rgba(214, 80, 0, 0.004);
                    color: #fff;
                    text-align: left;
                    border-top-right-radius: vw(1.6);
                    border-bottom-right-radius: vw(42);
                }

            }
            .content{
                padding:0 vw(16) vw(10);
                color: #666464;
                font-size: vw(28);
                line-height: vw(42);
            }
        }
        .interests-box {
            position: absolute;
            left: vw(600);
            top: vw(26);
            width: vw(120);
            height: vw(46);
            -webkit-border-radius: vw(23);
            -moz-border-radius: vw(23);
            border-radius: vw(23);
            background-color: rgba(197, 0, 0,.8);
            font-size: vw(24);
            color: #fff;
            text-align: center;
            line-height: vw(46);
        }
        .open-btn {
            position: absolute;
            /*left:vw(30);*/
            top: vw(1200);
            left: vw(14);
            /*width: vw(690);*/
            width: vw(722);
            height: vw(114);
            /*height: vw(80);*/
            background-image:url("../../../assets/images/plan-btn.png");
            background-size: 100% 100%;
            background-color: transparent;
            /*background-image: linear-gradient( 90deg, rgb(253,198,62) 0%, rgb(253,198,62) 51%, rgb(254,235,196) 100%);*/
            /*box-shadow: 0px 0px vw(19) 0px rgba(0, 0, 0, 0.44);*/
            border-radius: vw(57);
            color: #d64000;
            font-size: vw(32);
            border: 0;
            outline: 0;
            font-weight: 700;
        }

        .pop-box {
            width:vw(632);
            height:vw(680);
            padding: vw(40) vw(60);
            background:rgba(255,255,255,1);
            border-radius:vw(10);
            i.van-icon{
                position: absolute;
                right: vw(20);
                top: vw(20);
                font-size: vw(36);
                color: rgba(0,0,0,0.4);
            }
            h4{
                font-size: vw(36);
                text-align: center;
                margin: vw(10) 0;
                font-weight: 700;
            }
            label{
                min-width: vw(140);
            }
            .input-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: vw(90);
                border-bottom:1px solid #E6E6E6;
                input{
                    flex: 1;
                    min-width: 0;
                    padding: 0 vw(20);
                }
                button{
                    min-width:vw(160);
                    height:vw(48);
                    background:$orgGradientBg;
                    border-radius:vw(6);
                    color: #fff;
                }
            }
            .agree-btn {
                width:100%;
                height:vw(68);
                margin: vw(42) auto vw(10);
                background:$orgGradientBg;
                border-radius:vw(34);
                color: #ffffff;
            }
            p{
                font-size: vw(20);
                a{ color:#28DBC7;}

            }
        }
    }
</style>